<template>
  <div>
    <button @click="moveCamera">移动相机</button>
    <button @click="moveCube">移动物体</button>
    <div class="container"></div>
    <div id="gui"></div>
  </div>
</template>

<script lang="ts" setup>
import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js"; //轨道控制器
import { onMounted } from "vue";
import dat from "dat.gui";
const controlData = {
  rotationSpeed: 0.01,
  color: "#336688",
  wireframe: false,
  transparent: false,
  envMap: "无",
};

const gui = new dat.GUI();
const f = gui.addFolder("控制面板");
f.add(controlData, "rotationSpeed").min(0.01).max(50).step(1);
f.addColor(controlData, "color");
f.add(controlData, "envMap", ["无", "选项一", "选项二", "选项三"]);
f.add(controlData, "wireframe");
f.add(controlData, "transparent");
f.domElement.id = "gui";
f.open();

//创建场景
const scene = new THREE.Scene();
// scene.background = new THREE.Color(0x336688);

const cubetext = new THREE.CubeTextureLoader()
  .setPath("/")
  .load([
    "mapWarp1.png",
    "mapWarp1.png",
    "mapWarp1.png",
    "mapWarp1.png",
    "mapWarp1.png",
    "mapWarp1.png",
  ]);

scene.background = cubetext;
//创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.z = 10;
camera.position.y = 2;

//移动相机
const moveCamera = () => {
  camera.position.x = 20;
  camera.position.y = 10;
  camera.lookAt(2, 3, 0);
};

// 给物体添加纹理
// const textures = new THREE.TextureLoader().load("/mapWarp1.png");

//创建立方体
// const geometry = new THREE.BoxGeometry();
// const material = new THREE.MeshBasicMaterial({
//   // color: controlData.color,
//   map:textures
// });

//创建球体
const geometry = new THREE.SphereGeometry(1);
const material = new THREE.MeshBasicMaterial({
  // color: controlData.color,
  // map:textures
  envMap: cubetext,
});

//网格
const cube = new THREE.Mesh(geometry, material);
cube.position.set(2, 3, 0);
scene.add(cube);

//移动物体
const moveCube = () => {
  cube.position.x = 5;
  cube.position.y = 5;
  camera.lookAt(cube.position);
};

//创建渲染器
const renderer = new THREE.WebGLRenderer();

//调整渲染器窗口大小
renderer.setSize(window.innerWidth, window.innerHeight);

onMounted(() => {
  document.querySelector(".container")!.appendChild(renderer.domElement);
  document.querySelector("#id")!.appendChild(f.domElement);
});

//添加网格地面
const gridhelper = new THREE.GridHelper(10, 10);
scene.add(gridhelper);

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; //阻尼效果
controls.dampingFactor = 0.15; //阻尼系数
controls.autoRotate = true; //自动旋转
controls.autoRotateSpeed = 1.5;

//添加坐标轴辅助 蓝-Z 红-X 绿-Y
const axisHelper = new THREE.AxesHelper(5);
axisHelper.position.y = 3;
scene.add(axisHelper);

//添加雾效果
scene.fog = new THREE.Fog(0xcccccc, 10, 20);

//监听轨道控制器事件
controls.addEventListener("change", () => {
  // console.log("轨道控制器事件");
});

// renderer.render(scene, camera);

//运动函数
function animate() {
  requestAnimationFrame(animate);
  // cube.rotation.x += 0.01;
  // cube.rotation.y += 0.01;
  cube.rotation.x = controlData.rotationSpeed;
  cube.rotation.y = controlData.rotationSpeed;
  cube.material.color = new THREE.Color(controlData.color);
  material.wireframe = controlData.wireframe;
  //轨道控制器更新
  controls.update();
  renderer.render(scene, camera);
}

animate();
</script>

<style scoped lang="scss">
.btn {
  position: absolute;
  top: 10px;
  left: 10px;
}
</style>
